<template>
  <div class="mask" @keyup.esc="close">
    <div class="dialog-select">
      <div class="title">接口详情
        <el-button
          type="button"
          class="el-dialog__headerbtn"
          aria-label="Close" @click="close">
          <i class="el-dialog__close el-icon el-icon-close"></i>
        </el-button>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="tabClick" style="margin-top: 15px;">
        <el-tab-pane :label="item.interfaceNode.siaName" :name="item.nodeId" v-for="item in parentInterfaceList"></el-tab-pane>
      </el-tabs>
      <div class="json-info" id="outValueResultJson">
        <show-json-desc v-if="" :json-object="descList" />
      </div>
    </div>
  </div>
</template>

<script>
  import ShowJsonDesc from '../../compoents/ShowJsonDesc'
  import { jsonMain } from "@/libs/utils";

  export default {
      components: {
        ShowJsonDesc
      },
      name: "SelectOutValue",
      data () {
        return {
          descList: {},
          activeName: this.$store.getters.parentInterfaceList[0].nodeId,
          parentInterfaceList: this.$store.getters.parentInterfaceList,
          isShowDesc: true
        }
      },
      created() {
        this.getOutValue(this.activeName);
        //绑定选择出参点击事件
        setTimeout(() => {
          let _this = this;
          $(function () {
            $("#outValueResultJson").find(".key").on("click", function () {
              _this.$emit("selectOutValueCall", $(this).find("input[type=hidden]").val(), _this.currentNode.nodeId);
            })
          })
        }, 500)
      },
      methods: {
        close() {
          this.$emit("selectOutValueCall", null);
        },
        tabClick(tab) {
          this.getOutValue(tab.name);
        },
        getOutValue(nodeId) {
          for (let i = 0; i < this.parentInterfaceList.length; i++) {
            if (this.parentInterfaceList[i].nodeId === nodeId) {
              this.currentNode = this.parentInterfaceList[i];
              this.descList = jsonMain(JSON.parse(this.parentInterfaceList[i].interfaceNode.siaResponseData));
              console.log(this.descList);
              this.isShowDesc = false;
              this.$nextTick(() => {
                this.isShowDesc = true;
              });
              break;
            }
          }
        }
      }
    }
</script>

<style scoped lang="less">
  .mask{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding-top: 15vh;
    transition: all 0.3s;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    .dialog-select{
      width: 50%;
      margin: 0 auto;
      transition: all 0.3s;
      background: #fff;
      .title{
        color: #fff;
        position: relative;
        height: 40px;
        line-height: 40px;
        padding: 0 0 0 20px;
        background: -webkit-linear-gradient(left,#2fb0ff,#a2d8f9);
        .el-dialog__headerbtn{
          padding-right: 0;
          float: right;
          background: rgba(0, 0, 0 , 0);
          border: none;
        }
      }
    }
  }
  .json-info {
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    background: #f4f4f5;
    min-width: 100%;
    max-width: 100%;
    overflow: auto;
    resize: vertical;
    border-radius: 6px;
    height: 500px;
  }
</style>
